<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
	<!-- 鼠标经过 onmoouseover ,鼠标离开 onmouseout
	鼠标经过ttd表格时，当前行背景颜色变化，当鼠标离开时去掉背景颜色（恢复原样）
	第一行不变，即thead里面不变 -->
	
	<table border=1 width=300px height=150px cellpadding=0 cellspacing=0 align="center" >
		<thead>
			<tr>
				<th>水果</th>
				<th>文具</th>
				<th>方便面</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>苹果</td>
				<td>钢笔</td>
				<td>康师傅</td>
			</tr>
			<tr>
				<td>香蕉</td>
				<td>橡皮</td>
				<td>白象</td>
			</tr>
			<tr>
				<td>橘子</td>
				<td>尺子</td>
				<td>大骨汤</td>
			</tr>
		</tbody>
	</table>
	<script>
	//获取到tbody
		var bg=document.querySelector('table').querySelector('tbody');
		console.log(bg); //打印tbody
		//获取到tbody里面tr的伪数组
		var hang=bg.getElementsByTagName('tr');
		console.log(hang[0]);  //打印第一个tr
		//通过遍历每一个行，找出每一行里面的td进行设置
		for(var i=0;i<hang.length;i++){
			var gezi=0;
			gezi=hang[i].getElementsByTagName('td');
			//通过遍历行里面的格子，从而设置格子
			for(var j=0;j<gezi.length;j++){
				//鼠标经过
				gezi[j].onmouseover=function(){
					this.style.backgroundColor='red';
				}
				//鼠标离开
				gezi[j].onmouseout=function(){
					this.style.backgroundColor='';
				}
			}
		}
	</script>
</body>
</html>